

// 数据渲染
$(function(){
  
  // 列表数据渲染
  
  console.log(999);
  $.ajax({
    type:"get",
    url:"http://jx.xuzhixiang.top/ap/api/allproductlist.php",
    data:{
    uid:userID,
    pagesize:12,
    pagenum:1,
    },
    success:function(res){
      console.log(res.data);
      let listmainbox = $(".mi-list-main-box");
      console.log(listmainbox);
      let listmianData = res.data;
      let listmianStr = "";
      listmianData.forEach((item)=>{
        listmianStr+=`
        <div class="mi-list-main-data">
        <a href="detail.html" class="list-main-data-jump" data-id="${item.pid}" target="_blank">
          <div class="list-main-data-img">
              <img src="${item.pimg}" alt="">
          </div>
          <h2>${item.pname}</h2>
          <p>${item.pprice}元</p>
          <div class="list-main-data-simg">
              <img src="${item.pimg}" alt="">
          </div>

        </a>
        </div>
        `;
      });
      listmainbox.html(listmianStr);


      //点击跳转
      $(".list-main-data-jump").click(function(){
        let shopID = $(this).attr("data-id");
        localStorage.setItem("shopID",shopID);
      })
    }
  })

  // guess you like 数据渲染
  let listBannerarr = $(".swiper-slide");
  for(let i=0;i<listBannerarr.length;i++){
    $.ajax({
      type:"get",
      url:"http://jx.xuzhixiang.top/ap/api/allproductlist.php",
      data:{
        uid:userID,
        pagesize:1,
        pagenum:30+i,
      },
      success:function(res){
        // console.log(res.data[0]);
        let listData = res.data[0];
        let listStr ="";
          listStr=`
        
            <li>
                <a href="detail.html" class="list-swiper-jump" data-id="${listData.pid}">
                    <img src="${listData.pimg}" alt="">
                    <p class="list-swiper-jump-both list-swiper-jump-title">${listData.pname}</p>
                    <p class="list-swiper-jump-both list-swiper-jump-price">${listData.pprice}元</p>
                    <p class="list-swiper-jump-both list-swiper-jump-data">65万人好评</p>
                </a>
                <div class="list-swiper-jump-hidden">
                    <a href="car.html" data-id="${listData.pid}" class="list-like-car">加入购物车</a>
                </div>
            </li>
        

        `;
        listBannerarr[i].innerHTML = listStr;
        
        //点击跳转
      $(".list-swiper-jump").click(function(){
        let shopID = $(this).attr("data-id");
        localStorage.setItem("shopID",shopID);
      })
        // guess youlike
          $(".list-swiper-jump").mouseover(function(){
            $(this).siblings($(".list-swiper-jump-hidden")).stop().animate({
                bottom:"20px",
            },200)
            .mouseover(function(){
              $(this).stop().css({"background":"#ff6700"}).find("a").css({"color":"white"})
            })
          })

          $(".list-swiper-jump").mouseout(function(){
            $(".list-swiper-jump-hidden").stop().animate({
              bottom:"-30px",
          },200)
            .mouseout(function(){
              $(this).stop().css({"background":"white"}).find("a").css({"color":"#ff6700"})
            })

          })
          // console.log($(".list-swiper-jump-hidden"));

        // 加入购物车
        $(".list-like-car").click(function(){
          let shopID = $(this).attr("data-id");
          console.log(shopID)
          // localStorage.setItem("shopID",shopID);
          // let shopID = localStorage.getItem("shopID");
          $.ajax({
            type:"get",
            url:"http://jx.xuzhixiang.top/ap/api/add-product.php",
            data:{
                uid:userID,
                pid:shopID,
                pnum:1,
            },
            success:function(res){
                console.log(res);
            }
        })
        })
        
      }
      
    })
  }
})



// a标签 
$(".mi-list-url,.mi-list-fen,.mi-list-main")
.find("a").mouseover(function(){
    $(this).css({"color":"#ff6700"})
    .mouseout(function(){
        $(this).css({"color":"#333"})
    })
})


// 轮播图
var swiper = new Swiper(".mySwiper", {
    autoplay:true,
    slidesPerView: 5,
    spaceBetween: 14,
    slidesPerGroup: 5,
    loop: true,
    loopFillGroupWithBlank: true,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });
